// 控制选项卡切换
document.addEventListener('DOMContentLoaded', function () {
    // 初始化控制选项卡
    initControlTabs();

    // 添加初始日志
    addLog("系统初始化完成", "success");
    addLog("控制面板选项卡加载完成", "info");
    addLog("机械臂系统就绪", "success");
});

// 初始化控制选项卡
function initControlTabs() {
    const tabs = document.querySelectorAll('.control-tab');
    const tabContents = document.querySelectorAll('.control-tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            const tabId = this.getAttribute('data-tab');

            // 移除所有活动状态
            tabs.forEach(t => t.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));

            // 添加当前活动状态
            this.classList.add('active');
            document.getElementById(`tab-${tabId}`).classList.add('active');

            addLog(`切换到${this.textContent}选项卡`, "info");
        });
    });
}

// 切换一级选项卡（数据展示区域）
function switchMainTab(tabName) {
    console.log('切换主选项卡:', tabName);

    // 隐藏所有二级选项卡容器
    document.querySelectorAll('[id^="sub-tabs-"]').forEach(tab => {
        tab.style.display = 'none';
    });

    // 隐藏所有内容区域 - 只针对右侧面板的tab-content
    document.querySelectorAll('.right-panel .tab-content').forEach(content => {
        content.classList.remove('active');
    });

    // 移除所有一级选项卡的活动状态
    document.querySelectorAll('.main-tab').forEach(tab => {
        tab.classList.remove('active');
    });

    // 激活当前一级选项卡
    const activeTab = document.querySelector(`.main-tab[onclick="switchMainTab('${tabName}')"]`);
    if (activeTab) {
        activeTab.classList.add('active');
    }

    // 显示对应的二级选项卡容器
    const subTabs = document.getElementById(`sub-tabs-${tabName}`);
    if (subTabs) {
        subTabs.style.display = 'flex';
    }

    // 显示对应内容区域的第一个子选项
    const firstSubTab = document.querySelector(`#sub-tabs-${tabName} .sub-tab`);
    if (firstSubTab) {
        const subTabName = firstSubTab.getAttribute('onclick').match(/'([^']+)'/g)[1].replace(/^'|'$/g, '');
        switchSubTab(tabName, subTabName);
    }
}

// 切换二级选项卡（数据展示区域）
function switchSubTab(mainTab, subTab) {
    console.log('切换子选项卡:', mainTab, subTab);

    // 移除当前主选项卡下所有二级选项卡的活动状态
    document.querySelectorAll(`#sub-tabs-${mainTab} .sub-tab`).forEach(tab => {
        tab.classList.remove('active');
    });

    // 隐藏当前主选项卡下所有内容区域 - 只针对右侧面板
    document.querySelectorAll(`.right-panel [id^="content-${mainTab}-"]`).forEach(content => {
        content.classList.remove('active');
    });

    // 激活当前二级选项卡
    const activeSubTab = document.querySelector(`#sub-tabs-${mainTab} .sub-tab[onclick="switchSubTab('${mainTab}', '${subTab}')"]`);
    if (activeSubTab) {
        activeSubTab.classList.add('active');
    }

    // 显示对应的内容区域
    const content = document.getElementById(`content-${mainTab}-${subTab}`);

    if (content) {
        content.classList.add('active');
    }
}

// 节点控制函数
function controlRosNode(action) {
    const actions = {
        1: "启动所有节点",
        2: "重启所有节点",
        3: "关闭所有节点"
    };
    addLog(`${actions[action]}...`, "info");
    // 这里调用实际的API
    
    setTimeout(() => {
        addLog(`${actions[action]}完成`, "success");
    }, 1000);
}

// 索驱控制函数
function cableGlobalTie() {
    const tieMode = document.querySelector('input[name="tieMode"]:checked').value;
    const modeText = {
        'all': '全绑',
        'odd': '单数绑',
        'even': '双数绑'
    }[tieMode];

    addLog(`执行全局绑扎 - 模式: ${modeText}`, "info");
    // 这里调用实际的API
}

function cablePause() {
    addLog("索驱系统暂停", "warning");
    // 这里调用实际的API
}

function cableEmergencyStop() {
    addLog("索驱系统紧急停止", "error");
    // 这里调用实际的API
}

function cableResume() {
    addLog("索驱系统恢复运行", "success");
    // 这里调用实际的API
}

// 机械臂控制函数
function armSingleTie() {
    const isTie = document.getElementById('armTieCheck').checked;
    const isDive = document.getElementById('armDiveCheck').checked;

    addLog(`执行单点绑扎 - 绑扎: ${isTie ? '是' : '否'}, 下潜: ${isDive ? '是' : '否'}`, "info");
    // 这里调用实际的API
}

function armPause() {
    addLog("机械臂暂停", "warning");
    // 这里调用实际的API
}

function armResume() {
    addLog("机械臂恢复运行", "success");
    // 这里调用实际的API
}

function armClearError() {
    addLog("清除机械臂错误", "info");
    // 这里调用实际的API
    setTimeout(() => {
        addLog("机械臂错误已清除", "success");
    }, 1000);
}

function armGoHome() {
    addLog("机械臂回原点", "info");
    // 这里调用实际的API
    setTimeout(() => {
        addLog("机械臂已回到原点", "success");
    }, 1500);
}


// 参数设置函数 - 打开子窗口
function openCameraParams() {
    createModal('相机参数设置', `
        <div class="param-group">
            <label>分辨率:</label>
            <select>
                <option>640x480</option>
                <option>1280x720</option>
                <option>1920x1080</option>
            </select>
        </div>
        <div class="param-group">
            <label>帧率:</label>
            <input type="number" value="30" min="1" max="60">
        </div>
        <div class="param-group">
            <label>曝光:</label>
            <input type="range" min="0" max="100" value="50">
        </div>
    `);
    addLog("打开相机参数设置", "info");
}

function openArmParams() {
    createModal('机械臂参数设置', `
        <div class="param-group">
            <label>最大速度:</label>
            <input type="number" value="100" min="1" max="200"> %
        </div>
        <div class="param-group">
            <label>加速度:</label>
            <input type="number" value="50" min="1" max="100"> %
        </div>
        <div class="param-group">
            <label>关节限制:</label>
            <div class="checkbox-line">
                <input type="checkbox" checked> 启用软限位
            </div>
        </div>
    `);
    addLog("打开机械臂参数设置", "info");
}

function openCableParams() {
    createModal('索驱参数设置', `
        <div class="param-group">
            <label>张力设置:</label>
            <input type="number" value="50" min="0" max="100"> N
        </div>
        <div class="param-group">
            <label>速度限制:</label>
            <input type="number" value="75" min="1" max="100"> %
        </div>
        <div class="param-group">
            <label>安全阈值:</label>
            <input type="number" value="80" min="50" max="95"> %
        </div>
    `);
    addLog("打开索驱参数设置", "info");
}

// 模态窗口函数
function createModal(title, content) {
    const modalContainer = document.getElementById('modal-container');

    const modal = document.createElement('div');
    modal.className = 'modal active';
    modal.innerHTML = `
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">${title}</h3>
                <button class="modal-close" onclick="closeModal(this)">&times;</button>
            </div>
            <div class="modal-body">
                ${content}
            </div>
            <div class="modal-footer">
                <button class="modal-btn secondary" onclick="closeModal(this)">取消</button>
                <button class="modal-btn primary" onclick="saveParams(this)">保存</button>
            </div>
        </div>
    `;

    modalContainer.appendChild(modal);

    // 点击模态窗口外部关闭
    modal.addEventListener('click', function (e) {
        if (e.target === modal) {
            closeModal(modal);
        }
    });
}

function closeModal(element) {
    const modal = element.closest('.modal');
    if (modal) {
        modal.remove();
    }
}

function saveParams(element) {
    const modal = element.closest('.modal');
    const title = modal.querySelector('.modal-title').textContent;
    addLog(`${title}已保存`, "success");
    modal.remove();
}

// 日志功能
function addLog(message, type = 'info') {
    const logContainer = document.getElementById('log-container');
    const logEntry = document.createElement('div');
    logEntry.className = `log-entry ${type}`;

    const now = new Date();
    const timestamp = now.toTimeString().split(' ')[0];

    let icon = 'fa-info-circle';
    if (type === 'success') icon = 'fa-check-circle';
    else if (type === 'warning') icon = 'fa-exclamation-triangle';
    else if (type === 'error') icon = 'fa-exclamation-circle';

    logEntry.innerHTML = `
        <span class="log-time">[${timestamp}]</span>
        <i class="fas ${icon}"></i>
        <span>${message}</span>
    `;

    logContainer.appendChild(logEntry);
    logContainer.scrollTop = logContainer.scrollHeight;

    if (logContainer.children.length > 100) {
        logContainer.removeChild(logContainer.firstChild);
    }
}

function clearLogs() {
    if (confirm("确定要清除所有日志吗？")) {
        document.getElementById('log-container').innerHTML = '';
        addLog("已清除所有日志", "info");
    }
}

function exportLogs() {
    addLog("导出日志数据", "info");
    // 这里实现实际的导出功能
}

// 其他辅助函数
function refreshRealTimeData() {
    addLog("手动刷新状态数据", "info");
}

function toggleAutoRefresh() {
    const button = document.querySelector('.data-action-btn:nth-child(2)');
    const isAuto = button.innerHTML.includes('暂停');

    if (isAuto) {
        button.innerHTML = '<i class="fas fa-play-circle"></i> 自动刷新';
        addLog("已暂停自动刷新", "warning");
    } else {
        button.innerHTML = '<i class="fas fa-pause-circle"></i> 暂停刷新';
        addLog("已启用自动刷新", "success");
    }
}

// 模拟数据初始化
const mockStatusData = [
    { parameter: '运行状态', value: '待机', status: '正常', statusClass: 'status-success' },
    { parameter: '总点数', value: '12', status: '完成', statusClass: 'status-success' },
    { parameter: '成功点数', value: '8/12', status: '良好', statusClass: 'status-success' },
    { parameter: '成功率', value: '66.7%', status: '良好', statusClass: 'status-success' },
    { parameter: '当前点ID', value: '3', status: '进行中', statusClass: 'status-warning' },
    { parameter: '当前点坐标', value: 'X: 0.000, Y: 0.000', status: '待命', statusClass: 'status-info' },
    { parameter: '电池电量', value: '87%', status: '良好', statusClass: 'status-success' },
    { parameter: '运行时间', value: '2小时34分', status: '正常', statusClass: 'status-info' }
];

// 初始化状态数据
document.addEventListener('DOMContentLoaded', function () {
    updateStatusData(mockStatusData);
});

function updateStatusData(statusData) {
    const tbody = document.querySelector('#status-data-table tbody');
    if (!tbody) return;

    tbody.innerHTML = '';

    statusData.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.parameter}</td>
            <td>${item.value}</td>
            <td><span class="status-badge ${item.statusClass || 'status-info'}">${item.status}</span></td>
        `;
        tbody.appendChild(row);
    });
}